﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="BlocksStyleColored.ItemSubPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BlocksStyleColored"
    xmlns:common="using:BlocksStyleColored.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Assets/et-background.png"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page Heading" Style="{StaticResource PageHeaderTextStyle}" />
        </Grid>

        <ScrollViewer x:Name="itemGridScrollViewer" Margin="0" Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
            <StackPanel Margin="120,15,0,0" VerticalAlignment="Top">
                <TextBlock TextWrapping="Wrap" Text="Sub Heading 1" FontFamily="Myriad Pro" FontSize="34.667" Margin="0,0,0,10"/>
                <StackPanel Orientation="Horizontal">
                    <StackPanel Width="380" Height="424">
                        <Rectangle Height="245" Width="380" Fill="LightBlue" Margin="0,0,0,18"/>
                        <TextBlock TextWrapping="Wrap" TextAlignment="Justify" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." FontSize="12"/>
                    </StackPanel>
                    <StackPanel Width="360" Height="419" Margin="20,0,0,0">
                        <TextBlock TextWrapping="Wrap" TextAlignment="Justify" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." FontSize="12" Margin="0,0,0,18"/>
                        <Rectangle Height="256" Width="360" Fill="Aqua" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </StackPanel>
                    <StackPanel Width="310" Height="424" Margin="20,0,0,0">
                        <Rectangle Height="232" Width="310" Fill="Green" Margin="0,0,0,31"/>
                        <TextBlock TextWrapping="Wrap" TextAlignment="Justify" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop." FontSize="12" LineHeight="16"/>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>

        <Grid x:Name="gridSnap" Visibility="Collapsed" Grid.Row="1">
            <StackPanel Margin="15,0,20,20" Orientation="Vertical" d:LayoutOverrides="Height">

                <TextBlock Foreground="#ffffff" TextWrapping="Wrap" FontSize="26.667" Margin="0,200,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Light" >
                    <Run Text="Please switch to full screen to view the details."/>
                    <LineBreak/>
                    <Run/>
                    <LineBreak/>
                    <Run Text="" />
                    <LineBreak/>
                    <Run/>
                    <LineBreak/>
                    <LineBreak/>
                    <Run/>
                    <LineBreak/>
                </TextBlock>
            </StackPanel>
            <Image Margin="0,495,0,0" Source="Assets/Images/bg.jpg" Stretch="Fill"/>
        </Grid>
        
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup>
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridSnap" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    
</common:LayoutAwarePage>
